<template>
    <div>
        <el-carousel trigger="click" height="360px">
      <el-carousel-item v-for="item in xlList" :key="item">
        <div class="swiper">
            <img  @click="goDetail(item.id)" :src="item.img" alt="" style="width:100%;height:360px">
            <span>获赞:{{item.ding}}</span>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div style=" margin-top:20px;padding-left:20px;font-size: 30px;font-weight: bold;">推荐视频</div>
    <div class="list" >
            <div v-for="v in list2" :key="v.id" >
             <div @click="goDetail(v.id)">
                <img :src="v.img" alt="" style="width:100%;height:200px;border-radius:10px">
                  
                <div style="font-weight: bold;margin-top:10px">{{v.name}}</div>
                <div>分类:{{v.cname}}</div>
             </div>
            </div>
        </div>
        <div class='tabbar'>
      <div :class="{cur:cur==1}" @click="changeList(1)">最新</div>
      <div :class="{cur:cur==2}" @click="changeList(2)">最热</div>
        </div>
        <div class='tabbar'>
      <div :class="{cur:cid==v.id}" @click="changeCid(v.id)" v-for="v in fenleiList">{{ v.name }}</div>
        </div>
        <div class="list" >
            <div v-for="v in list" :key="v.id" >
             <div @click="goDetail(v.id)">
                <img :src="v.img" alt="" style="width:100%;height:200px;border-radius:10px">
                  
                <div style="font-weight: bold;margin-top:10px">{{v.name}}</div>
                <div>分类:{{v.cname}}</div>
             </div>
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api/index"
    export default {
        data() {
            return {
                cur:1,
                typeList: [],
                fenleiList:[],
                curId:null,
                list:[],
                list2:[],
                xlList:[],
                title:'',
                cid:null,
            }
        },
        mounted () {
       this.getFenleiList()
       api.videolist({page:1,size:99,cur:2}).then(res=>{
                this.xlList=res.data.list
                console.log(222,res);
            })
            api.getTuijian({uid:this.$store.state.user.id}).then(res=>{
                this.list2=res.data
            })
        },
        methods: {
            goDetail(id){
                this.$router.push("/xiangqing?id="+id)
            },
            changeList(id){
                this.cur=id
                this.getList()
            },
            changeCid(id){
                this.cid=id
                this.getList()
            },
            getFenleiList(){
                api.getfenleiList({page:1,size:99}).then(res=>{
                    this.fenleiList=res.data.list
                    this.fenleiList.unshift({
                        name:'全部',
                        id:null
                    })
                    this.cid=this.fenleiList[0].id
                    this.getList()
                    console.log(res,"909")
                })
            },
             getList(){
              
            api.videolist({page:1,size:99,cur:this.cur,cid:this.cid}).then(res=>{
                this.list=res.data.list
                console.log(222,res);
            })
        }
        },
       
    }
</script>

<style lang="scss" scoped>
.tabbar{
    margin-top:20px;padding-left:20px;
    display:flex;
    font-size: 20px;
    >div{
        margin-right: 20px;
        cursor: pointer;
        &.cur{
            color: #1e90ff;
        }
    }
}
.swiper{
    position: relative;
    span{
        position: absolute;
        top: 20px;
        left: 20px;
        color: white;
        font-size: 22px;
    }
}
.shanchu{
      text-decoration: line-through;
}
.list{
    *{
              box-sizing: border-box !important;
    }
    margin-top: 10px;
    display: flex;flex-wrap: wrap;
    >div{
  
        padding: 20px;
        width: 25%;
        >div{
            &:hover{
                background-color: #eee;
            }
            cursor: pointer;
            padding: 20px;
            border: 1px solid gray;
            border-radius: 20px;
            >div{
                font-size: 16px;
                line-height: 26px;
                height: 26px;
            }
        }
    }
}
.header{
    display: flex;
    background-color: blue;
    padding: 18px;
    >div{
        cursor: pointer;
        color: white;
        font-size: 15px;
        margin-right: 20px;
        &.cur{
            color: aqua;
        }
    }
}
</style>